import React from "react"

interface BookInfoGroupProps {
  title: string
  author: string
  description: string
  typography?: {
    bookTitle?: React.CSSProperties
    author?: React.CSSProperties
    descriptionTitle?: React.CSSProperties
    descriptionText?: React.CSSProperties
  }
}

const BookInfoGroup: React.FC<BookInfoGroupProps> = ({
  title,
  author,
  description,
  typography = {},
}) => {
  return (
    <div className="flex flex-col gap-2 sm:gap-4 w-full">
      <h1
        style={typography.bookTitle}
        className="text-lg sm:text-2xl font-bold text-black break-words"
      >
        {title}
      </h1>
      <span
        style={typography.author}
        className="text-sm sm:text-md font-medium text-blue-700"
      >
        {author}
      </span>
      <h2
        style={typography.descriptionTitle}
        className="text-base sm:text-xl font-bold text-black mt-2 sm:mt-4"
      >
        书籍介绍
      </h2>
      <p
        style={typography.descriptionText}
        className="text-sm sm:text-lg leading-relaxed text-black break-words"
      >
        {description}
      </p>
    </div>
  )
}

export default BookInfoGroup
